<template>
  <el-form ref="form" :inline="true" :model="form" label-width="80px">
    <el-form-item v-for="field in fields" v-show="field.search" :key="field.prop" :label="field.label">
      <el-date-picker  v-if="field.prop.indexOf('Date') != -1"
        v-model="form[field.prop]"
        align="right"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :placeholder="field.label"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
      @change="dateChange($event,field.prop)">
      </el-date-picker>
      <el-autocomplete class="my-autocomplete" v-else-if="model!='pig' && ['earmark', 'sow', 'boar'].indexOf(field.prop) != -1" v-model="form[field.prop]" :placeholder="field.placeholder" :fetch-suggestions="queryPigAsync" @select="((item) => {handlePigSelect (item, field.prop)})" clearable>
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix">
        </i>
        <template slot-scope="{ item }">
          <div class="earmark">{{ item.earmark }}</div>
          <span class="gender">{{ item.gender }}</span>
        </template>
      </el-autocomplete>
      <el-autocomplete class="my-autocomplete" v-else-if="field.prop.indexOf('houseId') != -1" v-model="form[field.prop]" :placeholder="field.placeholder" :fetch-suggestions="queryhouseAsync" @select="((item) => {handleHouseSelect (item, field.prop)})" clearable>
        <i
          class="el-icon-edit el-input__icon"
          slot="suffix">
        </i>
        <template slot-scope="{ item }">
          <div class="earmark">{{ item.name }}</div>
          <span class="gender">{{ item.stock }}</span>
        </template>
      </el-autocomplete>
      <RenSelect v-else-if="field.prop === 'gender'" dictType="gender" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="field.prop === 'source'" dictType="source" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="field.prop === 'state'" dictType="pig_status" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="field.prop === 'breed'" dictType="breed" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="field.prop === 'strain'" dictType="strain" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='pregnancy' && field.prop === 'status'" dictType="preg_status" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='birth' && field.prop === 'type'" dictType="birth_type" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='mortality' && field.prop === 'reason'" dictType="mortality_reason" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='mating' && field.prop === 'level'" dictType="semen_level" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='immune' && field.prop === 'operate'" dictType="immune_method" placeholder="" v-model="form[field.prop]"></RenSelect>
      <RenSelect v-else-if="model=='immune' && field.prop === 'needleModel'" dictType="needle" placeholder="" v-model="form[field.prop]"></RenSelect>
      <el-input v-else v-model="form[field.prop]" :placeholder="field.placeholder" :type="field.type" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="$emit('search', form)">{{ $t('query') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/* eslint-disable */
export default {
  props: ['fields', 'model'],
  data () {
    return {
      form: {},
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    dataRule () {
      let rules = {}
      this.fields.forEach((field) => {
        if (field.required) {
          rules[field.prop] = [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
        }
      })
      return rules
    }
  },
  mounted () {
    let self = this
    this.fields.forEach((field) => {
      if (!field.readonly) {
        self.$set(self.form, field.prop, field.default || '')
      }
    })
    this.loaded = true
  },
  methods: {
    dateChange (value,field) {
      console.log(value)
      this.form[field+'Start'] = value[0]
      this.form[field+'End'] = value[1]
      console.log(this.form)
    },
    queryPigAsync (queryString, cb) {
      this.$http.get(
        '/stock/pig/page', { params: {} }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let pigs = res.data.list
        cb(pigs)
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    queryhouseAsync (queryString, cb) {
      this.$http.get(
        '/basic/house/page', { params: {} }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        let houses = res.data.list
        cb(houses)
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    handlePigSelect (item, field) {
      console.log(item, field)
      this.dataForm[field] = item.id
    },
    handleHouseSelect (item, field) {
      this.dataForm[field] = item.id
    }
  }
}
</script>
<style>
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .earmark {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .gender {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .gender {
      color: #ddd;
    }
  }
}
</style>
